<template>
  <view>
    <quick-button></quick-button>
    <view class="order-list">
      <u-swiper
        :list="bannerList"
        height="200"
        indicator
        za
        indicatorInactiveColor="#8df"
        indicatorStyle="bottom: 10px;"></u-swiper>
      <view class="service-detail">
        <view class="service-title d-s" style="padding-left: 20rpx">
          <view class="title-left">资费须知</view>
        </view>
      </view>
      <view class="order-card">
        <view class="salary-list">
          <view class="salary-item">
            <view class="item-content">
              <view class="item-value">{{ serviceInfo.halfDay }}小时</view>
            </view>
            <view class="item-content">
              <view class="item-value">{{ serviceInfo.halfRrice }}元/天</view>
            </view>
            <view class="item-content" v-if="serviceInfo.monthHalfRate">
              <view class="item-value">
                {{ serviceInfo.monthHalfRate }}元/月
              </view>
            </view>
          </view>
          <view class="salary-item">
            <view class="item-content">
              <view class="item-value">{{ serviceInfo.allDay }}小时</view>
            </view>
            <view class="item-content">
              <view class="item-value">{{ serviceInfo.allPrice }}元/天</view>
            </view>
            <view class="item-content" v-if="serviceInfo.monthAllRate">
              <view class="item-value">
                {{ serviceInfo.monthAllRate }}元/月
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="order-card">
        <view v-if="payment.length > 0" class="payment-box bor-bot">
          <view
            class="payment-item"
            v-for="(item, index) in payment"
            :key="index"
            :class="{ selected: paymentId === item.id }"
            @tap="onPaymentChange(item.id)">
            {{ item.couponName }}
          </view>
        </view>
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">计费方式</view>
          <view class="billing-options">
            <view
              class="billing-option"
              :class="{ selected: billingType === 'daily' }"
              @click="setBillingType('daily')">
              按天
            </view>
            <view
              class="billing-option"
              :class="{ selected: billingType === 'monthly' }"
              @click="setBillingType('monthly')"
              v-if="showOption">
              按月
            </view>
          </view>
        </view>
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">服务时长</view>
          <view class="billing-options">
            <view
              class="billing-option"
              :class="{ selected: serviceTime == '8' }"
              @click="setServiceTime('8')">
              8小时
            </view>
            <view
              class="billing-option"
              :class="{ selected: serviceTime == '24' }"
              @click="setServiceTime('24')">
              24小时
            </view>
          </view>
        </view>
        <view class="service-cycle bor-bot" v-if="serviceTime != 24">
          <view class="cycle-icon" style="margin-bottom: 10rpx">服务时段</view>
          <view class="radio-container">
            <view
              v-for="(item, index) in timeOptions"
              :key="index"
              class="time-option"
              :class="{ selected: serverCycle === item.value }"
              @tap="onChange(item.value)">
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="service-cycle bor-bot" v-if="billingType == 'daily'">
          <view class="cycle-icon" style="margin-bottom: 10rpx">
            服务周期
            <view style="display: inline-block; font-weight: normal">
              (x{{ dayCounts }}天)
            </view>
          </view>
          <view
            class="cycle-date"
            style="margin-bottom: 10rpx"
            @click="openPicker(startDay)">
            开始时间：
            <view style="display: inline-block">
              <view v-if="startDay" style="display: inline-block">
                {{ startDay }}
              </view>
              <view v-else style="display: inline-block; color: #c1c1c1">
                请选择开始日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>>
              </view>
            </view>
          </view>
          <view
            class="cycle-date"
            style="margin-bottom: 10rpx"
            @click="openPicker1(endDay)">
            结束时间：
            <view style="display: inline-block">
              <view v-if="endDay" style="display: inline-block">
                {{ endDay }}
              </view>
              <view v-else style="display: inline-block; color: #c1c1c1">
                请选择结束日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>>
              </view>
            </view>
          </view>
        </view>

        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">被护理人</view>
          <view class="client-info" @click="toPatientList">
            <view v-if="Object.keys(patientInfo).length > 0" class="info">
              <view class="info-title">
                <view class="info-icon">被护理人信息</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">
                  姓名：{{ patientInfo.patientName }}
                </view>
                <view class="patien-item">
                  性别：{{ patientInfo.patientSex }}
                </view>
                <view class="patien-item">
                  年龄：{{ patientInfo.patientAge }}
                </view>
              </view>
              <view class="patient-info">
                <view class="patien-item">
                  基本信息：
                  <span class="patien-content">
                    {{ patientInfo.patientMedical }}
                  </span>
                  <span class="patien-content">
                    {{ patientInfo.patientPdiagnose }}
                  </span>
                </view>
              </view>
              <view class="info-title">
                <view class="info-icon">联系人</view>
              </view>
              <view class="patient-info">
                <view class="patien-item">
                  姓名：{{ patientInfo.createUser }}
                </view>
                <view class="patien-item">
                  电话：{{ patientInfo.patientPhone }}
                </view>
              </view>
            </view>
            <view class="info" v-else style="padding: 15rpx 0; color: #c1c1c1">
              选择被护理人&nbsp;&nbsp;&nbsp;&nbsp;>>
            </view>
          </view>
        </view>
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">护工性别</view>
          <view class="client-info" @click="chooseSex">
            <view
              v-if="!sexValue"
              class="info"
              style="padding: 15rpx 0; color: #c1c1c1">
              选择护工性别&nbsp;&nbsp;&nbsp;&nbsp;>>
            </view>
            <view v-else class="info" style="padding: 15rpx 0">
              {{ sexValue }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 服务详情 -->
    <view class="service-detail">
      <view class="service-title d-s" style="padding-left: 20rpx">
        <view class="title-left">服务详情</view>
        <!-- <view class="title-right">下单须知</view> -->
      </view>
    </view>
    <view class="service-box">
      <view class="service-item">
        <view class="left">服务类型</view>
        <view class="right">{{ serviceInfo.categoryCode }}</view>
      </view>
      <view class="service-item">
        <view class="left">职责范围</view>
        <view class="right">{{ serviceInfo.categoryValue }}</view>
      </view>
      <view class="service-item">
        <view class="left">工作时长</view>
        <view class="right">{{ serviceInfo.categoryObject }}小时</view>
      </view>
      <view class="notice">
        <view class="notice-title">[注意事项]</view>
        <view class="notice-content">
          1.为提高服务质量，护工做好充分准备，建议提前24小时 下单服务。
          <br />
          2.如果护工已按照约定出发或已到达服务地址，客户临时取消订单需扣除相关费用。
          <br />
          3.房屋面积超过120m²不足200m²的，每月增加服务费300元。
          <br />
          4.用餐人数超过4人，每增加2人，每月增加服务费300元。
          <br />
          5.护工护理期间负责家庭卫生时，不含高空、高危、涉及外立面玻璃、窗等部位，如有需要，请联系专业人员处理。
          <br />
          6.半自理以上级别护理的，护工只负责老人病人对应护理，只负责老人房间卫生及义务清洗和餐食制作。
          <br />
          7.服务事项：按双方提前沟通开展服务，客服电话：13572116118。
        </view>
      </view>
      <!-- 具体服务 -->
      <!-- <view class="service-container">
        <view class="title">我们提供的服务</view>
        <view class="service-list">
          <view
            class="service-item"
            v-for="(item, index) in serviceList"
            :key="index"
          >
            <view class="top"
              ><image mode="scaleToFill" :src="item.pic" alt=""
            /></view>
            <view class="bottom">
              <view class="name">{{ item.name }}</view>
              <view class="content">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view> -->
      <!-- 我们的承诺 -->
      <view class="service-container">
        <view class="title">我们的承诺</view>
        <view class="service-list">
          <view
            class="service-item service-border"
            style="width: 23%"
            v-for="(item, index) in promiseList"
            :key="index">
            <view class="top-img">
              <image
                style="height: 50%"
                mode="aspectFit"
                :src="item.pic"
                alt="" />
            </view>
            <view class="bottom">
              <view class="name">{{ item.name }}</view>
              <view class="content" style="text-align: center">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 下单须知 -->
    <view class="service-detail">
      <view class="service-title d-s" style="padding-left: 20rpx">
        <view class="title-left">下单须知</view>
      </view>
    </view>

    <view class="instructions">
      <view class="instructions-item">
        <view class="top">有效期</view>
        <view class="bottom">*下单后90天内有效下单信息</view>
      </view>
      <view class="instructions-item">
        <view class="top">下单信息</view>
        <view class="bottom">*请提前下单，改约详情请您咨询商家</view>
      </view>
      <view class="instructions-item">
        <view class="top">温馨提示</view>
        <view class="bottom">*如需发票，请您在消费时详向商家咨询</view>
        <view class="bottom">
          *上门服务时，工作人员会主动出示工作证件，请注意查看，谨防上当受骗。
        </view>
        <view class="bottom">*为保障您的权益，建议线上支付</view>
      </view>
    </view>
    <view class="bottom-fixed-view">
      <view class="agreement-view" v-if="showDoc">
        <view class="select-button" @click="radioClick">
          <image
            src="../../static/tab_select_have.png"
            v-if="radioSelected"></image>
          <image src="../../static/tab_select_not.png" v-else></image>
        </view>
        <view class="text">
          我已阅读并同意
          <view class="agreement" @click="toAgreement">《用户协议》</view>
        </view>
      </view>
      <view class="pay-view">
        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <view style="width: 80rpx">共计：</view>
          <cn-money
            :money="discountPrice"
            :size="48"
            :showUnit="true"
            :discount="originalPrice"></cn-money>
        </view>
        <view class="pay-btn" @click="handleSubmit()">
          <!-- 	 <view class="pay-btn" @click="sendMsgToServer()"> -->
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
            <view>提交订单</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 时间选择器 -->
    <view @touchmove.stop.prevent="() => {}">
      <u-datetime-picker
        @cancel="closeTimePicker"
        :show="showTime"
        ref="datetimePicker"
        v-model="startDay1"
        @confirm="confirmTimePicker"
        :formatter="formatter"
        mode="date"
        :minDate="todayStr"></u-datetime-picker>
    </view>
    <view @touchmove.stop.prevent="() => {}">
      <u-datetime-picker
        @cancel="closeTimePicker1"
        :show="showTime1"
        :minDate="todayStr"
        ref="datetimePicker1"
        v-model="endDay1"
        @confirm="confirmTimePicker1"
        :formatter="formatter"
        mode="date"></u-datetime-picker>
    </view>
    <!-- 选择性别 -->
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      @close="showSex = false"
      @select="sexSelect"></u-action-sheet>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import PageInfo from "../../utils/pageutils.js";
import cnMoney from "../../components/cn-money/cn-money";
import * as wxPay from "../../common/api/wxPay.js";
import {
  getNurseServe,
  saveOrder,
  getServiceById,
  couponList,
} from "../../common/api/index.js";
import {
  subscribeMessage,
  calculateDaysBetweenTimestamps,
} from "../../utils/index.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {
    cnMoney,
  },
  data() {
    return {
      pickerShowByDay: false,
      maxDay: 60,
      startDay: "",
      endDay: "",
      startDay1: 0,
      endDay1: 0,
      tabs: ["居家照顾", "医院陪护"],
      current: 0,
      status: "",
      orderStatus: "全部",
      status: "",
      readForm: {},
      bannerList: [
        "https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/banner_01.png",
      ],
      indicatorDots: false,
      range: "",
      totalMoney: "",
      radioSelected: false,
      list: [],
      listOne: [],
      listTwo: [],
      serverId: "",
      code: "",
      allData: [],
      patientInfo: {},
      editFlag: false,
      isUpdate: false,
      orderId: "",
      orderAmout: null,
      orderState: "",
      datetimerange: [],
      showDoc: true,
      showTime1: false,
      showTime: false,
      isOpen: false,
      isSubmit: true,
      todayStr: "",
      token: "",
      serviceList: [
        {
          name: "做饭",
          content: "根据医护人员要求，为病人制作餐食，食物温度：20-39度",
          pic: "../../static/zuofan.jpg",
        },
        {
          name: "打扫卫生",
          content: "定期为病人清洁房屋，打扫卫生",
          pic: "../../static/dasao.png",
        },
        {
          name: "洗衣",
          content: "定期为病人清洁衣物，确保病人健康",
          pic: "../../static/xiyi.jpg",
        },
        {
          name: "喂药",
          content: "每日按时给病人喂食药物",
          pic: "../../static/weiyao.png",
        },
        {
          name: "陪伴",
          content: "长久的病人陪伴服务",
          pic: "../../static/peiban.png",
        },
        {
          name: "辅助行动",
          content: "早晚各一小时辅助行动锻炼",
          pic: "../../static/fuzhuxingdong.png",
        },
        {
          name: "扣背排痰",
          content: "每两小时辅助翻身一次，扣背排痰，吸痰",
          pic: "../../static/fanshen.jpg",
        },
        {
          name: "更换纸尿裤",
          content: "定期为病人更换纸尿裤或坐垫",
          pic: "../../static/genghuanhulidian.png",
        },
      ],
      promiseList: [
        {
          name: "专业培训",
          content: "培训上岗 更专心",
          pic: "../../static/icon_peixun.png",
        },
        {
          name: "持证上岗",
          content: "多证在手 更贴心",
          pic: "../../static/icon_chizheng.png",
        },
        {
          name: "技能熟练",
          content: "基础扎实 更安心",
          pic: "../../static/icon_jineng.png",
        },
        {
          name: "全面体检",
          content: "岗前体检 更放心",
          pic: "../../static/icon_tijian.png",
        },
      ],
      serviceInfo: {},
      originalPrice: "0.00",
      discountPrice: "0.00",
      priceSpread: "0.00",
      dayCounts: 0,
      serverCycle: "",
      timeOptions: [
        { label: "8时-17时", value: "morning" },
        { label: "9时-18时", value: "noon" },
        { label: "10时-19时", value: "night " },
      ],
      actions: [
        {
          name: "男",
        },
        {
          name: "女",
        },
      ],
      showSex: false,
      sexValue: "",
      payment: [],
      paymentId: "",
      paymentItem: {},
      workerInfo: {},
      billingType: "", // 默认选中按天
      serviceTime: "", //服务时长
      showOption: true,
      values: ""
    };
  },
  computed: {
    ...mapGetters({
      pageInfo: "page/pageInfo",
    }),
  },
  mounted() {
    this.getCurrentDate();
  },
  onShow() {
    if (this.pageInfo?.choosePatient) {
      this.patientInfo = this.pageInfo.choosePatientInfo;
      this.$nextTick(() => {
        this.$store.commit("page/setPageInfo", {});
      });
    }
    if (this.pageInfo?.chooseWorker) {
      this.workerInfo = this.pageInfo.chooseWorkerInfo;
      this.$nextTick(() => {
        this.$store.commit("page/setPageInfo", {});
      });
    }
  },
  onLoad(opt) {
    console.log("进来了订单详情", opt);
    this.values = opt.value
    this.token = uni.getStorageSync("App-Token");
    this.serviceType = uni.getStorageSync("selectedCategory");
    if (this.serviceType == "医院陪护") {
      this.billingType = "daily";
      this.showOption = false;
    }
    // 编辑
    if (opt.isUpdate) {
      this.serverId = opt.serverId;
      this.code = opt.code;
      this.isUpdate = opt.isUpdate;
      getNurseServe().then((res) => {
        // 所有数据
        this.allData = res.data.data;
        // 根据项目类型过滤的服务项
        let data = res.data.data.filter((item) => {
          return item.code == this.code;
        })[0].nurseServersList;
        this.$nextTick(() => {
          this.list = data;
        });
      });
      if (this.pageInfo?.chooseOrder) {
        this.patientInfo = this.pageInfo.chooseOrderInfo.nursePatient;
        this.startDay = this.pageInfo.chooseOrderInfo.serverStart;
        this.endDay = this.pageInfo.chooseOrderInfo.serverEnd;
        this.startDay1 = Date.parse(this.startDay);
        this.endDay1 = Date.parse(this.endDay);
        this.serviceInfo.categoryValue =
          this.pageInfo.chooseOrderInfo.serverValueList.join(",");
        this.serviceInfo.categoryPrice =
          this.pageInfo.chooseOrderInfo.serverPrice;
        this.serviceInfo.monthPrice =
          this.pageInfo.chooseOrderInfo.serverMonthPrice;
        this.serviceInfo.categoryObject =
          this.pageInfo.chooseOrderInfo.categoryObject;
        this.serviceInfo.serverValue =
          this.pageInfo.chooseOrderInfo.serverValue;
        this.serviceInfo.specialOfferPrice =
          this.pageInfo.chooseOrderInfo.specialOfferPrice;
        this.computeCount();
        this.editFlag = this.pageInfo.chooseOrder;
        this.orderId = this.pageInfo.chooseOrderInfo.orderId;
        this.orderState = this.pageInfo.chooseOrderInfo.orderState;
        this.serverCycle = this.pageInfo.chooseOrderInfo.serverCycle;
        if (this.orderId) {
          this.showDoc = false;
        }
        this.$nextTick(() => {
          this.radioSelected = this.patientInfo.chooseOrder;
          this.$store.commit("page/setPageInfo", {});
        });
      }
      // 新增
    } else {
      this.serverId = opt.serverId;
      this.code = opt.code;
      this.orderId = "";
      this.serverCycle = "";
      getNurseServe().then((res) => {
        this.allData = res.data.data;
        let data = res.data.data.filter((item) => {
          return item.code == this.code;
        })[0].nurseServersList;
        this.$nextTick(() => {
          this.list = data;
        });
      });
      getServiceById({ serverId: this.serverId }).then((res) => {
        let data = res.data.data;
        this.serviceInfo = data;
        this.getCouponList();
      });
    }
  },
  methods: {
    chooseSex() {
      this.showSex = true;
    },
    setBillingType(type) {
      this.billingType = type;
      this.serverCycle = "";
      this.serviceTime = "8";

      if (this.billingType == "monthly") {
        this.computeCount();
      } else {
        this.dayCounts = 0;
        this.startDay = "";
        this.endDay = "";
        this.totalPrice = "";
        this.discountPrice = "";
      }
    },
    setServiceTime(time) {
      this.serverCycle = "";
      this.serviceTime = time;
      if (this.billingType == "monthly") {
        this.computeCount();
      } else {
        // this.dayCounts = 0
        // this.startDay = ''
        // this.endDay = ''
        // this.totalPrice = ''
        // this.discountPrice = ''
        if (this.startDay) {
          this.computeCount();
        }
      }
    },
    getCouponList() {
      couponList({
        userId: uni.getStorageSync("USER_ID"),
        serverId: this.serverId,
      }).then((res) => {
        if (Array.isArray(res.data.data) && res.data.data.length > 0) {
          this.payment = res.data.data;
          this.paymentId = res.data.data[0].id;
          this.paymentItem = res.data.data[0];
        }
      });
    },
    sexSelect(e) {
      this.sexValue = e.name;
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      if (type === "hour") {
        return `${value}时`;
      }
      if (type === "minute") {
        return `${value}分`;
      }
      return value;
    },
    getCurrentDate() {
      let currentDate = new Date();
      let twoMonthsAgo = new Date(currentDate);
      this.todayStr = new Date(currentDate).getTime();
      let year = twoMonthsAgo.getFullYear();
      let month = (twoMonthsAgo.getMonth() + 1).toString().padStart(2, "0");
      let day = twoMonthsAgo.getDate().toString().padStart(2, "0");
      let dateValue = `${year}-${month}-${day}`;
      this.startDay1 = Date.parse(dateValue);
      this.endDay1 = Date.parse(dateValue);
      return dateValue;
    },
    isValidTimeRange(startStr, endStr) {
      const startDate = new Date(startStr).getTime();
      const endDate = new Date(endStr).getTime();
      if (endDate >= startDate) {
        return false;
      }

      return true;
    },
    closeTimePicker() {
      this.showTime = false;
    },
    closeTimePicker1() {
      this.showTime1 = false;
    },
    toAgreement() {
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/userAgreement/userAgreement?type=1`,
      });
    },
    confirmTimePicker(e) {
      this.startDay = this.formatTime(e.value);
      this.showTime = false;
      this.startDay1 = e.value;

      this.computeCount();
    },
    confirmTimePicker1(e) {
      this.endDay = this.formatTime(e.value);
      this.showTime1 = false;
      this.endDay1 = e.value;
      this.computeCount();
    },
    openPicker(value) {
      this.startDay = value;
      this.$refs.datetimePicker.innerValue = this.startDay1;
      this.showTime = true;
    },
    openPicker1(value) {
      this.endDay = value;
      this.$refs.datetimePicker1.innerValue = this.endDay1;
      this.showTime1 = true;
    },
    computeCount() {
      this.originalPrice = "0.00";
      this.dayCounts = calculateDaysBetweenTimestamps(
        this.startDay1,
        this.endDay1
      );
      let unitPrice = null;
      let monthPrice = null;

      // 按天计算
      if (this.billingType == "daily") {
        if (this.serviceTime == "8") {
          unitPrice = this.serviceInfo.halfRrice;
        } else {
          unitPrice = this.serviceInfo.allPrice;
        }
        this.discountPrice = this.dayCounts * Number(unitPrice);

        // 按月计算
      } else {
        if (this.serviceTime == "8") {
          monthPrice = this.serviceInfo.monthHalfRate;
          this.discountPrice = monthPrice;
        } else {
          monthPrice = this.serviceInfo.monthAllRate;
          this.discountPrice = monthPrice;
        }
      }
      this.totalPrice = this.discountPrice;
    },
    // 格式化时间
    formatTime(timestamp) {
      let dateObject = new Date(timestamp);
      let year = dateObject.getFullYear();
      let month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
      let day = dateObject.getDate().toString().padStart(2, "0");
      let formattedDateTime = `${year}-${month}-${day}`;
      return formattedDateTime;
    },
    debounce(func, wait) {
      let timeout;
      return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), wait);
      };
    },
    // 折叠
    toggleContent() {
      this.isOpen = !this.isOpen;
    },
    tabClick(item, index) {
      this.code = item.code;
      this.list = [];
      this.$nextTick(() => {
        this.list = this.allData.filter((i) => {
          return i.code == item.code;
        })[0].nurseServersList;
        this.serverId = this.list[0].serverId;
      });
    },
    itemChangeHandle(e) {
      this.serverId = e.detail.currentItemId;
    },
    radioClick() {
      this.radioSelected = !this.radioSelected;
    },
    // 选人
    toPatientList() {
      uni.navigateTo({
        url: "/nursingWorkerPages/pages/patientList/patientList?values="+ this.values,
      });
    },
    toWorkerList() {
      uni.navigateTo({
        url: "/nursingWorkerPages/pages/nursingWorker/nursingWorker",
      });
    },
    handleSubmit() {
      this.addAndPay();
    },
    // 表单验证
    checkFormAdd() {
      let msg = "";
      const showMsg = () => {
        if (msg) {
          uni.showToast({
            title: msg,
            icon: "none",
          });
        }
      };
      if (!this.patientInfo.patientId) {
        msg = "被护理人信息不能为空";
        showMsg();
        return false;
      }
      if (this.billingType == "daily") {
        if (!this.startDay) {
          msg = "开始时间不能为空";
          showMsg();
          return false;
        }
        if (!this.endDay) {
          msg = "结束时间不能为空";
          showMsg();
          return false;
        }
      }
      if (this.serviceTime == "8") {
        if (!this.serviceTime) {
          msg = "服务时长不能为空";
          showMsg();
          return false;
        }
      }
      if (this.serviceTime != 24) {
        if (!this.serverCycle) {
          msg = "服务时段不能为空";
          showMsg();
          return false;
        }
      }
      return true;
    },

    // 添加
    addAndPay() {
      this.isSubmit = false;
      this.orderAmout = this.list.filter((item) => {
        return item.serverId == this.serverId;
      });
      if (!this.checkFormAdd()) {
        return;
      }
      if (!this.orderId) {
        if (!this.radioSelected) {
          uni.showToast({
            icon: "none",
            title: "请勾选用户协议！",
          });
          return false;
        }
      }
      if (this.debounceTimeout) {
        clearTimeout(this.debounceTimeout);
      }

      let params = {
        orderCategory: this.serviceInfo.serverValue,
        orderServer: this.serverId,
        orderAmout: this.totalPrice,
        nursePatientId: this.patientInfo.patientId,
        nurseUserId: this.patientInfo.patientUserId,
        serverStart: this.startDay,
        serverEnd: this.endDay,
        orderId: this.orderId,
        serverCycle: this.serverCycle,
        nurseSex: this.sexValue,
        couponId: this.paymentItem.id,
        nurseId: this.workerInfo.nurseId,
      };
      params.isFlag = 1;
      params.openId = uni.getStorageSync("openid_key");
      if (!this.isSubmit) {
        saveOrder(params)
          .then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                icon: "success",
                title: res.data.msg,
              });
              setTimeout(() => {
                uni.setStorageSync("nav_to_nurse_index", 1);
                uni.reLaunch({ url: "/nursingWorkerPages/pages/index/index" });
              }, 1500);
            }
          })
          .catch((error) => {
            console.log(error);
          })
          .finally(() => {
            this.isSubmit = true;
          });
      }
    },
    onChange(value) {
      this.serverCycle = value;
    },
    onPaymentChange(value) {
      this.paymentId = value;
      this.paymentItem = this.payment.filter((item) => {
        return item.id == value;
      })[0];
      this.computeCount();
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 70%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      font-weight: 700;
      color: #333333;

      .status-price {
        color: #ffb35b;
      }
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;
    min-height: 130rpx;

    .service-tag {
      min-width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 10rpx;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}

.service-cycle {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;

  .cycle-icon {
    width: 240rpx;
    height: 50rpx;
    line-height: 50rpx;
    // padding-left: 50rpx;
    // background: url(/nursingWorkerPages/static/shijian.png) no-repeat left center;
    background-size: 40rpx 40rpx;
    font-weight: 700;
    font-size: 30rpx;
  }

  .cycle-date {
    width: 70%;
    font-size: 30rpx;
  }
}

::v-deep.uni-icons {
  display: none !important;
}

.client-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;

    .patient-info {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      align-items: center;
      color: #adadad;

      .patien-item {
        margin: 10rpx 40rpx 10rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .patien-content {
          display: inline-block;
          max-width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .info-title {
      font-size: 30rpx;
      font-weight: 700;

      .info-icon {
        width: 250rpx;
        height: 50rpx;
        line-height: 50rpx;
        padding-left: 50rpx;
        background: url(/nursingWorkerPages/static/lianxiren.png) no-repeat left
          center;
        background-size: 40rpx 40rpx;
        font-weight: 700;
        font-size: 30rpx;
      }
    }
  }
}

.arrow {
  width: 10%;
  color: #cdcdcd;
}

.bottom-fixed-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  border-top-left-radius: 30rpx;
  border-top-left-radius: 30rpx;

  // box-shadow: 10px 10px 5px #333;
  .agreement-view {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    border-bottom: solid 2rpx #f2f2f2;

    .text {
      color: rgba(35, 35, 35, 0.5);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .agreement {
        color: #6279f9;
      }
    }

    .item {
      color: #0bc5ae;
    }
  }

  .pay-view {
    width: 100%;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    color: #232323;
    font-size: 26rpx;
    margin-left: 10rpx;

    .show-details {
      flex: 1;
      margin-left: 28rpx;
      font-size: 24rpx;
      color: #0bc5ae;

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }

    .pay-btn {
      // min-width: 260rpx;
      padding: 0 80rpx;
      height: 88rpx;
      // line-height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #fc6804;
      // background: #ff0000;
      color: white;
      border-radius: 48rpx;
      font-size: 30rpx;
      // margin-left: 160rpx;
    }
  }
}

.select-button {
  width: 40rpx;
  height: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.save {
  background: #fbb15c !important;
  margin-right: 10rpx;
}

::v-deep.uni-date-x {
  padding: 0 !important;
}

// 服务详情
.service-detail {
  font-weight: 700;
  font-size: 30rpx;
  margin: 30rpx;
  width: 100%;

  .title-right {
    font-weight: normal;
    margin-left: 20rpx;
  }
}

.d-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.service-box {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10rpx;
    font-size: 30rpx;
  }

  .left {
    color: #ababab;
    margin-right: 10rpx;
    width: 160rpx;
  }

  .right {
    text-align: left;
    display: inline-block;
    width: 100%;
  }

  .notice {
    margin: 20rpx 0;
    border-top: 1rpx solid #c7c7c7;

    .notice-title {
      font-weight: 700;
      padding: 10rpx 0;
    }

    .notice-content {
      font-size: 25rpx;
      color: #333;
      width: 100%;
      // white-space: pre-line;
      text-align: justify;
      line-height: 40rpx;
    }
  }
}

.service-container {
  .title {
    border: 1rpx solid #c7c7c7;
    padding: 10rpx;
    text-align: center;
    margin-bottom: 15rpx;
    font-weight: 700;
  }

  .service-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .service-item {
      width: 48%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 320rpx;

      .top {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 10rpx;
      }

      .top image {
        width: 80%;
        height: 140rpx;
        border: 1rpx solid #c1c1c1;
        vertical-align: top;
      }

      .top-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        border: 1rpx solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .bottom {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        min-height: 150rpx;

        .name {
          text-align: center;
          font-weight: 700;
          font-style: 20rpx;
          height: 50rpx;
        }

        .content {
          font-size: 25rpx;
          background-color: #f5f3f3;
          padding: 10rpx;
          width: 100% !important;
        }
      }
    }
  }
}

.service-border {
  border: 1rpx solid #c1c1c1;
  border-radius: 10rpx;
  padding: 10rpx;
}

.instructions {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  margin-bottom: 220rpx;

  .instructions-item {
    padding: 10rpx;

    .top {
      color: #9e9e9e;
    }
  }
}

.container1 {
  display: flex;
  flex-direction: column;
}

.header {
  padding: 10px;
  // background-color: #f1f1f1;
  text-align: center;
  cursor: pointer;
}

.content1 {
  margin: 0 30rpx;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  // max-height: 0;
  padding: 0 15rpx;

  .detail-title {
    font-weight: 700;
    font-size: 40rpx;
    text-align: center;
    padding: 15rpx 0;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e2e2e2;
    padding: 15rpx 30rpx;
  }
}

.content1.open {
  max-height: 500px;
  /* 这个值应该根据你的内容最大高度适当调整 */
}

// 顶部标题
.service-item-title {
  position: relative;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;

  .service-item-title-content {
    font-size: 40rpx;
    font-weight: 700;
    margin-bottom: 45rpx;
    white-space: normal;
    overflow-y: hidden;
  }

  .service-item-price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 5rpx;
    right: 0;
    font-weight: 700;
    font-size: 35rpx;
  }
}

.bor-bot {
  border-bottom: 1rpx solid #ececec;
}

// 单选框
.radio-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;

  .time-option {
    padding: 10rpx;
    margin-bottom: 10rpx;
    border-radius: 5rpx;
    text-align: center;
    transition: background-color 0.3s;
    background-color: #f1f1f1;
    margin-right: 15rpx;
    border-radius: 10rpx;

    &.selected {
      background-color: #fd6802;
      color: #fff; // 文字颜色可以根据需要调整
    }
  }
}

.payment-box {
  display: flex;
  justify-content: flex-start;
  padding: 15rpx 0;

  .payment-item {
    min-width: 120rpx;
    // background-color: #fc6804;
    // color: #fff;
    text-align: center;
    transition: background-color 0.3s;
    background-color: #f1f1f1;
    padding: 8rpx 10rpx;
    margin-right: 20rpx;
    border-radius: 5rpx;

    &.selected {
      background-color: #fd6802;
      color: #fff; // 文字颜色可以根据需要调整
    }
  }
}

.salary-list {
  margin-top: 10rpx;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;

  .title {
    text-align: left;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    padding-left: 10rpx;
  }

  .salary-item {
    display: flex;
    justify-content: space-around;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    margin-bottom: 10rpx;
    padding: 10rpx 15rpx;

    .item-content {
      display: flex;
      justify-content: space-between;
      padding: 5rpx 0;
      // border-bottom: 1px solid #eee;
    }

    .item-content:last-child {
      border-bottom: none;
    }

    .item-label {
      font-size: 24rpx;
      color: #666;
    }

    .item-value {
      font-size: 24rpx;
      color: #333;
      font-weight: bold;
    }
  }
}

// 计费方式
.billing-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.billing-option {
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  background-color: #f1f1f1;
  margin-right: 15rpx;
}

.billing-option.selected {
  background-color: #fd6802;
  color: white;
}
</style>
